import React, { Component, PureComponent } from 'react'
import { Link } from "react-router-dom";
import '@/css/My.css';




class My extends Component {
  constructor(props) {
    super(props)
    this.state = {
      cnSign: "立即签到",
      signInTimes: [1, 1, 0, 0, 0, 0, 0],
      isSigned:false
    }
  }
  componentDidMount() {

  }
  componentWillUnmount() {

  }
  handleSign = () => {
    if (this.state.cnSign !== '明天继续') {
      //触发ajax请求
      //得到最新签到数组
      this.state.signInTimes.splice(2,1,1)
      this.setState({
        signInTimes:this.state.signInTimes,
        cnSign: "明天继续",
        isSigned:true
      })
    }
  }
  render() {
    return (
      <div style={{ backgroundColor: '#e7edf0' }}>

        <div className="my-wrap">
          <div className="yt yt-pj">
            <div className="yt">
              <img src="https://tva3.sinaimg.cn/crop.0.0.79.79.180/9ed5c127gw1ejgi2kk0bng2028028t8m.gif?KID=imgbed,tva&Expires=1584596962&ssig=j7oNHXAJTG" className="my-head" />
              <div className="my-self-info">
                <div className="my-self-name">张三</div>
                <div className="my-self-uid">25632</div>
              </div>
            </div>





          </div>

          <div className="yt yt-pja my-inter-info">
            <div><span className="my-inter-info-num">12</span>投稿</div>
            <div><span className="my-inter-info-num">33</span>粉丝</div>
            <div><span className="my-inter-info-num">0</span>关注</div>
          </div>

        </div>



        <div className="yt yt-ver my-fn-wrap">
          <div className="yt yt-pj yt-f1">
            {this.state.signInTimes.map((v, k) => {
              return (
                <div key={k} className={`signin-count-wrap ${v ? 'signin-count-ed' : ''}`}>
                  <div className="signin-count">{v ? <i className="alifont font20">&#xe844;</i> : <i className="alifont font20">&#xe61c;</i>}</div>
                  <div className="signin-count-desc">{k}天</div>
                </div>
              )
            })}


            <div className="signin-count-wrap-cutline"></div>
          </div>



          <button className={`my-everyday-btn ${this.state.isSigned ? 'my-everyday-btn-ed' : ''}`} onClick={this.handleSign}>
            {this.state.cnSign}
          </button>
        </div>


        <div className="my-menu">
        <Link to="/login" className="yt yt-ac yt-pj my-menu-item">
            <div className="my-menu-item-desc">竞猜历史</div>
            <div><i className="alifont font20 my-menu-item-icon">&#xe60b;</i></div>
          </Link>
          <Link to="/resetpassword" className="yt yt-ac yt-pj my-menu-item">
            <div className="my-menu-item-desc">修改密码</div>
            <div><i className="alifont font20 my-menu-item-icon">&#xe60b;</i></div>
          </Link>
        </div>

        <div className="btn-logout">退出登录</div>


        {/* <div className="fn-section">
          <div className="fn-title">个人中心</div>
          <div className="clearfix"></div>
          <div className="yt yt-bm">
            <div className="yt yt-ver yt-ac yt-1f4 fn-item" onTouchStart={() => { }}><i className="alifont font20">&#xe60c;</i><div className="no-touch">我的收藏</div></div>
          </div>
        </div> */}

   

      </div>


    )
  }


}
export default My